<template>
	<view class="home">
		<view class="scrollNav">
			<scroll-view scroll-x="true" class="navscroll">
				<view class="item" :class="index==navIndex ? 'active' : '' " 
				v-for="(item,index) in navList" @click="clickNav(index,item.id)" 
				:key=item.id>
				{{item.classname}}
				</view>
			</scroll-view>
		</view>
		<view class="content">
			<div class="row" v-for="item in newsList">
				<newsbox :item="item" @click.native="godetail(item)"></newsbox>
			</div>
			<view class="nodata">
				<image src="../../static/images/无数据.png" mode="widthFix" v-if="!newsList.length"></image>
			</view>
			<view class="loading">
				<view></view>
				<view v-if="loading == 1">数据加载中...</view>
				<view v-if="loading ==2">没有更多数据~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				navList:[],
				newsList:[],
				currentPages:1,
				loading:0	//0默认 1加载中 2没有更多
			}
		},
		onLoad() {
			this.getNavData()
			this.getNewsData()
		},
		onReachBottom() {
			if(this.loading == 2){
				return
			}
			this.currentPages++
			this.loading = 1
			this.getNewsData()
		},
		methods: {
			//点击导航
			clickNav(index,id){
				this.navIndex = index
				this.currentPages = 1
				this.newsList = []
				this.loading = 0
				this.getNewsData(id)
			},
			//跳转详情页
			godetail(item){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			//获取导航列表数据
			getNavData(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success:res=>{
						this.navList = res.data
					}
				})
			},
			//获取新闻列表数据
			getNewsData(id=50){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{
						cid:id,
						num:8,
						page:this.currentPages
					},
					success:res=>{
						if(res.data.length == 0){
							this.loading = 2
						}
						this.newsList = [...this.newsList,...res.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.navscroll{
	height: 100rpx;
	background-color: #ececec;
	white-space: nowrap;
	position: fixed;
	top: var(--window-top);
	left: 0;
	z-index: 10;
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding: 0 30rpx;
		color: #333;
		&.active{
			color: #7093DB;
		}
	}
	/deep/::-webkit-scrollbar{
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	}
}
.content{
	padding: 30rpx;
	padding-top: 130rpx;
	.row{
		border-bottom: 2px dashed #efefef;
		padding: 20rpx 0;
	}
}
.nodata{
	display: flex;
	justify-content: center;
	image{
		width: 350rpx;
	}
}
.loading{
	text-align: center;
	font-size: 26rpx;
	color: #888;
	line-height: 3em;
}
</style>
